<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../js/jquery-3.2.1.min.js"></script>
<style type="text/css">
	#box{
		width: 500px;
		height: 400px;
		background-color: lightgray;
	}
	#infoBox{
		position: absolute;
		left: 20px;
		top: 230px;
	}
	#inputBox{
		position: absolute;
		left: 20px;
		top: 300px;
	}
</style>
<script type="text/javascript">
	$(document).ready(function(){
		//1.准备连接服务器的url  websocket基于STOMP协议，所有url前不能用http
		var url = "ws://127.0.0.1:12315/chat/";
		//2.定义websocket对象
		var ws = null;
		//3.连接服务
		$("#join").click(function(){
			//3.1、获取当前用户的名字
			var userName = $("#userName").val();
			//3.2、拼接url和userName 将用户名传给服务器
			url = url + userName;
			//3.3、连接服务器，如果连接成功则会自动创建websocket对象
			ws = new WebSocket(url); //chat/zhangsan
			//3.4、绑定事件
			//绑定open连接事件
			ws.onopen = function(){
				console.info("连接成功!")
			}
			//绑定message事件
			ws.onmessage = function(res){
				var textArea = $("#messageBox");
				textArea.append(res.data+"\n");	//将消息追加到消息框中
				//设置滚动条处于最后面
				textArea.scrollTop = textArea.scrollHeight;	//？
			}
			//绑定关闭事件
			ws.onclose = function(){
				var textArea = $("#messageBox");
				textArea.append("用户:"+userName+"离开聊天室"+"\n");
				console.info("断开连接!");
			}
		});
		//离开聊天室
		$("#out").click(function(){
			if(ws!=null){
				ws.close();
			}
		});
		//发送消息
		$("#send").click(function(){
			//获取消息
			var message = $("#message").val();
			if(message==null || message==""){
				return;
			}
			if(ws!=null){
				ws.send(message);//发送消息
				$("#message").val("");	//情况输入框
			}
		});
	});
</script>
</head>
<body>
	<div id="box">
		<p>蜗牛聊天室</p>
		<textarea rows="10" cols="50" disabled="disabled" id="messageBox"></textarea>
		<div id="infoBox">
			用户名:<input type="text" id="userName">&nbsp;&nbsp;&nbsp;
			<button id="join">加入聊天室</button>&nbsp;&nbsp;&nbsp;
			<button id="out">离开聊天室</button>
		</div>
		<div id="inputBox">
			<input type="text" id="message"><br>
			<button id="send">发送消息</button>
		</div>
	</div>
</body>
</html>